<template>
  <!-- 商品分类界面 -->
  <div>
    <div class="search">
      <div class="ser">
        <span class="icon"></span>
        <span class="goods" @click="go">商品搜索,共239款好物</span>
      </div>
    </div>
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryList"
          :key="item.id"
          @click="getlist(item.id)"
        />
      </van-sidebar>
    </div>
    <div class="right">
      <div class="banner">
        <img :src="currentOne.banner_url" alt="" />
      </div>
      <div class="title">
        <span>-</span>
        <span class="name">{{ currentOne.name }}分类</span>
        <span>-</span>
      </div>
      <div class="bottom">
        <div
          class="item"
          v-for="item in subList"
          :key="item.id"
          @click="gocate(item.id)"
        >
          <img :src="item.wap_banner_url" alt="" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <tab></tab>
  </div>
</template>

<script>
import { indexaction } from "@/api/home/current/indexaction.js";
import { currentaction } from "@/api/home/current/index.js";
import tab from "../all/rt.vue";
export default {
  props: {},
  data() {
    return {
      activeKey: 0,
      categoryList: [],
      subList: [],
      id: 1005000,
      currentOne: {},
    };
  },
  computed: {},
  created() {
    this.init();
    // this.getlist()
    currentaction({
      id: this.id,
    }).then((res) => {
      this.subList = res.data.currentOne.subList;
      this.currentOne = res.data.currentOne;
    });
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
      indexaction().then((res) => {
        // console.log(res);
        this.categoryList = res.categoryList;
      });
    },
    getlist(id) {
      this.id = id;
      currentaction({
        id: this.id,
      }).then((res) => {
        //   console.log(res);
        this.subList = res.data.currentOne.subList;
        this.currentOne = res.data.currentOne;
      });
    },
    go() {
      this.$router.push("/home/search");
    },
    gocate(id) {
      this.$router.push({ path: "/home/cate", query: { ids: id } });
    },
  },
  components: {
    tab: tab,
  },
};
</script>

<style lang="scss" scoped>
.search {
  height: 44px;
  padding: 15px;
  background: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ededed;
  .ser {
    width: 345px;
    height: 28px;
    background: #ededed;
    border-radius: 0.10667rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png)
        50% no-repeat;
      background-size: 100%;
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
    .goods {
      display: inline-block;
    }
  }
}
.right {
  width: 70%;
  float: right;
  border-left: 1px solid #fafafa;
  flex: 1;
  height: 100%;
  padding: 15px 15px;
  .banner {
    width: 100%;
    height: 110px;
    margin-top: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    text-align: center;
    padding: 25px 0;
    .name {
      font-size: 0.32rem;
      color: #333;
      padding: 5px;
    }
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33.33%;
      text-align: center;
      margin-bottom: 10px;
      img {
        width: 72px;
        height: 72px;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.left {
  float: left;
}
</style>
